<template>
  <div class="base-course-container">

    <div class="box">

      <div class="box-header">
        零基础入门
      </div>
      <div class="box-body">

        <div v-for="(obj,i) in courseList"
             :key="obj.courseId"
             class="wrap"
             @mouseenter="mouseenter"
             @mouseleave="mouseleave"
             @click="goCourse(obj)">
          <img :src="obj.courseCover" alt="">

        </div>

      </div>

    </div>

  </div>
</template>

<script>

export default {
  //组件名称
  name: "BaseCourse",
  props: [],
  //组件注册
  components: {},
  //数据驱动
  data() {
    return {
      courseList: []
    }
  },
  //计算属性
  computed: {},
  //数据监听
  watch: {},
  //方法
  methods: {
    mouseenter() {
    },
    mouseleave() {

    },
    goCourse(obj){
      //跳转
      let {href} = this.$router.resolve({
        name: "CourseDetails",
        query: {
          cid: obj.courseId
        }
      });
      window.open(href, '_blank');
    },
    //查询基本课程列表
    selectBaseCourseList() {
      this.axios.get("/course/web/base")
          .then((data) => {
            this.courseList = data.data;
          })
    }
  },
  //钩子函数
  created() {
    this.selectBaseCourseList()
  },
  mounted() {
  }
}
</script>

<style lang="less" scoped>
.base-course-container {
  min-width: 1200px;
  width: 1200px;
  margin: 0px auto;
  border-radius: 6px;

  .box {
    .box-header {
      font-size: 24px;
      font-weight: bolder;
      color: #333;
      padding-left: 6px;
      height: 24px;
      line-height: 24px;
    }

    .box-body {
      margin-top: 10px;
      display: flex;
      flex-wrap: wrap;
      width: 100%;

      .wrap {
        width: 18%;
        margin: 16px 1% 0 1%;
        cursor: pointer;
        border-radius: 8px;

        img {
          width: 100%;
          height: 120px;
          display: inline-block;
          border-radius: 8px;
        }
      }

      .wrap:hover {
        width: 18%;
        margin: 8px 1% 0 1%;
        cursor: pointer;
        border-radius: 4px;
        box-shadow: 0px 3px 2px 1px #777;
      }
    }
  }
}
</style>